<template>
	<u-popup :show="show" mode="center" :round="10">
		<view class="service-box">
			<view class="head2" v-if="text != '微信售后'">
				<text>首购商品可进行鞋子的更换</text>
			</view>
			<view class="head" v-else>
				<text>联系客服</text>
				<image @click="close" class="close" src="@/static/images/service-close.png" mode="aspectFit"></image>
			</view>
			<view class="closebox"  @click="close">
				<u-icon name="close-circle-fill" color="" size="28"></u-icon>
			</view>
			<view class="body">
				<button open-type="contact" session-from="" class="service-active">
					<text>{{ text }}</text>
					<image src="@/static/images/right-b.png" mode="aspectFit"></image>
				</button>

				<view class="info-box">
					<view class="info-1">
						<text style="white-space: nowrap">{{ config.com_title }}客服电话</text>
						<text class="line-1">（服务时间09：00-20：30）</text>
					</view>

					<view class="info-1" @click="GoKeFu(config.com_kefu)">
						<text>{{ config.com_kefu }}</text>
						<image src="@/static/images/phone.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'kefupop',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		text: {
			type: String,
			default: '微信售后'
		}
	},
	computed: {
		...mapState(['config'])
	},
	data() {
		return {};
	},
	methods: {
		close() {
			this.$emit('close');
		}
	}
};
</script>

<style lang="less" scoped>
.service-box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 686rpx;
	min-height: 342rpx;
	background: #ffffff;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
	.closebox {
		position: absolute;
		.fix-c-x();
		.flex-center();
		bottom: -100rpx;
		border-radius: 50%;
		background: #fff;
		width: 20px;
		height: 20px;
		opacity: 0.62;
		.j-active();
	}
	.head2 {
		padding: 30rpx;
		text-align: center;
		text {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #000000;
		}
	}
	.head {
		.flex-between();
		height: 100rpx;
		padding: 0 24rpx;
		background: @basecolor;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #ffffff;
		.close {
			width: 26rpx;
			height: 26rpx;
		}
	}
	.body {
		flex: 1;
		position: relative;
		height: auto;
		.service-active {
			.flex-between();
			width: 638rpx;
			height: 76rpx;
			margin: 24rpx;
			margin-bottom: 24rpx;
			padding: 0 16rpx;
			background: @basecolor;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #ffffff;
			.j-active();
			image {
				width: 11rpx;
				height: 20rpx;
			}
			&::after {
				border: none;
			}
		}
		.info-box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: absolute;
			bottom: 0;
			width: 686rpx;
			min-height: 118rpx;
			padding: 18rpx 24rpx;
			background: #fce9e9;
			border-radius: 0rpx 0rpx 8rpx 8rpx;
		}
		.info-1 + .info-1 {
			// margin-top: 14rpx;
		}
		.info-1 {
			position: relative;
			display: flex;
			align-items: center;
			text:nth-of-type(1) {
				font-size: 24rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			text:nth-of-type(2) {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			image {
				width: 20rpx;
				height: 20rpx;
				margin-left: 30rpx;
			}
		}
	}
}
</style>
